<template>
    <div class="pages">
        <div class="chanicon">

        </div>
        <div class="tetxtwebs">银盛助手</div>

        <div class="inbtebsd">
            <div class="phoneshou">
                <div class="iconfl">
                    <img src="../../../static/images/icon-login-phone.png" alt="">
                </div>
                <div class="inputer">
                    <input type="number" v-model="phone" placeholder="请输入手机号码">
                </div>
            </div>

            <div class="phoneshou codes">
                <div class="iconfl">
                    <img src="../../../static/images/dada.png" alt="">
                </div>
                <div class="inputer">
                    <input type="password" v-model="code" placeholder="请输入密码" />
                </div>
            </div>

            <div class="password_login" @click="codeLogin()">使用验证码登录</div>

            <!-- <div class="login_deng">登录</div> -->
            <van-button plain :loading="typelio"  :disabled="typelio"  type="info" class="intgebv" loading-text="登录中..." block @click="liogining()">登录</van-button>

            <div class="inttebs">
                <div class="intbvdbf">
                    <van-checkbox v-model="checked" shape="square" icon-size="20px"></van-checkbox>
                </div>
                <div class="trtsbbds">
                    <span>我已阅读并同意</span>
                    <span>《银盛助手用户协议》</span>
                    <span>和</span>
                    <span>《银盛助手隐私政策》</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import api from '../../api/logIn'
Vue.prototype.$api = api
import { Toast } from 'vant';
import qs from 'qs';
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#fff')
    },
      beforeDestroy () {
        document.querySelector('body').setAttribute('style', '')
    },
    data(){
        return{
            typelio:false,
            checked: true,

            phone:'',
            code:'',
        }
    },
    methods:{
        // 登录
        liogining(){
            if(this.phone == ''){
                Toast('请输入手机号');
                return;
            }
            if(this.code == ''){
                Toast('请输入密码');
                return;
            }
            if(this.checked == false){
                Toast('请勾选协议条款');
                return;
            }
            this.typelio = true
            const params = {
                username:this.phone,
                password:this.code
            }
            this.$api.codelogin(qs.stringify(params)).then((res) => {
                console.log(res)
                if(res.status == '0000'){
                    localStorage.setItem('mytoken', res.ownerId)
                    localStorage.setItem('businesses', JSON.stringify(res.payload.agency.businesses))
                    Toast('登录成功');
                    setTimeout(() => {
                        this.typelio = false
                        this.$router.push({ name: "Index" });
                    }, 1000);
                }else{
                    Toast(res.describe);
                    setTimeout(() => {
                        this.typelio = false
                    }, 1000);
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        codeLogin(){
            this.$router.push({ name: "login" });
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .chanicon{
        border-radius: 100px;
        background: #C4C4C4;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        margin-top: 36px;
    }
    .chanicon>img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .tetxtwebs{
        margin-top: 16px;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 24px;
        letter-spacing: 0px;
    }

    .inbtebsd{
        width: 100%;
        padding: 0 48px;
        box-sizing: border-box;
        margin-top: 56px;
    }

    .phoneshou{
        width: 100%;
        padding: 8.5px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #BDBDBD;
        display: flex;
        align-items: center;
    }

    .iconfl{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
    }
    .iconfl>img{
        width: 100%;
        height: 100%;
    }
    .inputer{
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .inputer>input{
        width: 100%;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
        border: 0;
    }

    .codes{
        margin-top: 42.5px;
    }
    
    .zuobians{
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .zuobians>input{
        width: 100%;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
        border: 0;
    }
    .youbiande{
        width: 88px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid #3288FF;
        color: #3288FF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .password_login{
        width: 100%;
        margin-top: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #3288FF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .login_deng{
        width: 100%;
        height: 48px;
        margin-top: 25px;
        border-radius: 4px;
        border: 1px solid #3288FF;
        color: #3288FF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .intgebv{
        margin-top: 25px;
    }
    .inttebs{
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
        margin-top: 30px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .trtsbbds{
        width: 90%;
        /* display: flex; */
        text-align: center;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 12px;
        letter-spacing: 0px;
        display: inline-block;
    }
    .trtsbbds>div{
        display: inline-block;
    }
</style>